<template>
  <div class="problem">
    <!-- 常见问题 -->
    <!-- 一级菜单 -->
    <el-tabs type="card" v-model="activeName">
      <!-- 使用流程 -->
      <el-tab-pane name="flow">
        <div slot="label" class="menuLevel">
          <img src="http://www.decerp.cn/productstyle/imags/0li.png" /> 使用流程
        </div>
        <!-- 二级菜单 -->
        <el-tabs type="border-card" stretch>
          <el-tab-pane v-for="(item, index) in flowData" :key="index" :label="item.title">
            <div class="tableItem">
              <!-- 三级菜单 -->
              <el-tabs :tab-position="tabPosition">
                <!-- 这个是左边的标题 -->
                <el-tab-pane
                  v-for="(subitem, subindex) in item.children"
                  :key="subindex"
                  :class="titleCurrent == subindex ? 'active' : ''"
                  @click="handleClick(subindex)"
                  :label="subitem.title"
                >
                  <!-- 这个是右边的问题内容 -->
                  <div class="solveContent">
                    <div class="title">{{subitem.title}}</div>
                    <p style="margin-left: 20px;color: #000">{{subitem.replenish}}</p>
                    <img :src="subitem.replenishImg" style="margin: 20px" />
                    <div class="problemDec">
                      <ul>
                        <li
                          style="list-style: inherit;margin-bottom: 25px"
                          v-for="items in subitem.problemDec"
                        >{{items}}</li>
                      </ul>
                    </div>
                    <div class="imgDec" v-for="imgItem in subitem.imgDec">
                      <img :src="imgItem" style="width: 80%;margin-left: 20px;margin-bottom: 10px" />
                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <!-- 常见问题 -->
      <el-tab-pane>
        <div slot="label" class="menuLevel">
          <img src="http://www.decerp.cn/productstyle/imags/4li.png" /> 常见问题
        </div>
        <!-- 二级菜单 -->
        <el-tabs type="border-card" stretch>
          <el-tab-pane
            v-for="(item, index) in issueData"
            :key="index"
            :label="item.sv_help_sub_name"
          >
            <div class="tableItem">
              <!-- 三级菜单 -->
              <el-tabs :tab-position="tabPosition">
                <!-- 这个是左边的标题 -->
                <el-tab-pane
                  v-for="(subitem, subindex) in item.contentlist"
                  :key="subindex"
                  :class="titleCurrent == subindex ? 'active' : ''"
                  @click="handleClick(subindex)"
                  :label="subitem.sv_title"
                >
                  <!-- 这个是右边的问题内容 -->
                  <div class="solveContent">
                    <div class="problemDec" v-html="subitem.sv_content"></div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <!-- 视频中心 -->
      <el-tab-pane>
        <div slot="label" class="menuLevel">
          <img src="http://www.decerp.cn/productstyle/imags/2li.png" /> 视频中心
        </div>
        <div class="video">
          <div class="videoContent">
            <div class="title">会员管理系统视频教程</div>
            <div class="titleDec">关于德客会员管理系统各功能模块操作视频介绍</div>
            <ul class="videoList">
              <li v-for="(item,index) in videoData" :key="index">
                <a target="_blank" :href="item.href">
                  <i :class="item.icon"></i>
                  <!-- <img src="http://www.decerp.cn/images/member/tengxunicon.png"> -->
                  <p>{{item.name}}</p>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </el-tab-pane>
      <!-- 硬件连接 -->
      <!-- <el-tab-pane>
        <div slot="label" class="menuLevel">
          <img src="http://www.decerp.cn/productstyle/imags/3li.png"> 硬件连接
        </div>
        <el-tabs type="border-card" :tab-position="tabPosition">
          <el-tab-pane label="厨房打印机安装设置操作流程">
            <div class="hardwareItem">
              <div class="title">后厨打印机设置流程</div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="标签打印机安装操作流程">
            <div class="hardwareItem">
              <div></div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="前台小票打印机安装操作流程">
            <div class="hardwareItem">
              <div></div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="扫码枪链接使用流程">
            <div class="hardwareItem">
              <div></div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="商米M1、手机、平板APP等连接蓝牙打印机操作流程">
            <div class="hardwareItem">
              <div></div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="收银电子秤连接调试流程">
            <div class="hardwareItem">
              <div></div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>-->
      <!-- 版本更新 -->
      <el-tab-pane name="commonality">
        <div slot="label" class="menuLevel">
          <img src="http://www.decerp.cn/productstyle/imags/5li.png" /> 版本更新
        </div>
        <div class="notice">
          <div class="title">版本更新公告</div>
          <div class="updateItem" v-for="(item, index) in updateLog" :key="index">
            <div class="updateTitle">{{item.sv_message_title}}</div>
            <div class="updateTime">发布时间：{{item.sv_creation_date}}</div>
            <div class="updateContent" v-html="item.sv_message_content"></div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 控制内容tab栏的方向
      tabPosition: "left",
      // 默认激活的一级菜单
      activeName: "flow",
      // 激活项数据
      titleCurrent: 0,
      // 常见问题的数据
      issueData: [],
      // 使用流程的数据
      flowData: [
        {
          title: "会员管理",
          children: [
            {
              title: "如何新增会员？",
              replenish:
                "一个成功的店铺，离不开会员的，会员的消费、维护直接影响着一个店铺的营业额，那要怎么新增会员呢？",
              problemDec: [
                "首先登录德客软件后台，点击“会员管理”—“新增会员”—“新增”；",
                "首先登录德客软件后台，点击“会员管理”—“新增会员”—“新增”；",
                "会员信息填写也是对于销售和会员营销有很大作用的，销售员可以根据会员信息进行技巧营销，从而提高销售额。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180711/20180711172443_4635.gif"
              ]
            },
            {
              title: "会员等级在哪里设置？",
              replenish:
                "为了更好的维护会员，很多商家都想让不同等级的会员享受不同的折扣，商家可以根据会员的等级给予不一样的待遇，这个对会员营销有很大作用的，德客软件可以让商家设置会员等级。",
              problemDec: [
                "首先登录德客后台，点击“系统管理”，进入“会员配置”设置模块；",
                "会员级别和折扣设置：选择“按累计积分晋升等级”或“按当前积分晋升等级”",
                "可以根据会员拥有不同区间的积分、设置不同的折扣和会员等级。设置好后，会员在消费的时候，会根据自己的积分享受折扣。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180711/20180711172402_0314.gif"
              ]
            },
            {
              title: "如何给会员充值？",
              replenish:
                "会员充值充次，是便于会员消费，对于商家来说，也是为了可以积累资金，让会员进行多次消费，百利无一害；那么德客软件如何给会员充值充次呢？",
              problemDec: [
                "进入德客软件后台—点击“会员管理”，进入“会员充值”页面；",
                "选择要充值或充次的会员",
                "填写完成后，点击“确认”即可充值成功，会员消费的时候可以直接使用。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180711/20180711172240_1096.gif"
              ]
            },
            {
              title: "如何查看会员的积分？",
              replenish:
                "会员消费就得积分，这个是商家最有效的一个会员营销方法了，会员积分除了可以引导会员多次消费外，会员还可以根据积分来兑换消费金额或者兑换礼品，那么怎么查看会员有多少积分呢？",
              problemDec: [
                "首先登录德客软件后台，进入“会员管理”—“积分管理”页面；",
                "可在会员列表选择会员，或者通过搜索手机号或者会员卡号查看积分。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180711/20180711144202_3166.gif"
              ]
            },
            {
              title: "如何批量导出会员信息？",
              replenish:
                "会员是商家的心脏，虽然说会员管理系统数据很稳定，但是不少商家都习惯把会员信息导出来，但是吧，一个一个来，也太耗时了。不怕，德客软件可以帮到您，下面一起来看看如何批量导出会员信息吧！",
              problemDec: [
                "首先登录德客后台，点击“会员管理”，进入“会员列表”页面；",
                "然后点击“导入”，选择“导出会员”；点击“下载”，会员信息就会导出到相应的excel表格；"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180706/20180706170050_1847.gif"
              ]
            }
          ]
        },
        {
          title: "商品管理",
          children: [
            {
              title: "如何新增商品？",
              replenish:
                "商品是店铺的基本要素，没商品没店铺，那么通过德客软件怎么新增商品、要填写什么商品信息呢？",
              problemDec: [
                "首先登录德客软件后台，.进入“商品管理”—“新增商品”页面；",
                "然后点击“新增”，填写好新增商品信息，标 * 是必填的，其它可以选填；",
                "填写好之后，如果想继续新增商品，点击“保存并新增”；若停止新增商品，点击“确定”即可。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180711/20180711172116_8097.gif"
              ]
            },
            {
              title: "如何新增商品分类？",
              replenish:
                "商家之所以选择软件，节省人力物力是一个很重要的因素，那么商品分类，可以帮商家轻松分类，在选择商品的时候，省下不少时间。",
              problemDec: [
                "首先登录德客软件后台，进入“商品管理”—“商品分类”页面；",
                "点击“新增一级分类”，选择类型，输入类别名称，点击确定；",
                "还有二级分类的话，点击一级分类，新增二级分类即可。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180711/20180711171926_5989.gif"
              ]
            },
            {
              title: "如何批量上传商品信息？",
              replenish:
                "一家店铺的商品都是成千上百的，如果要一个个上传，也不知道要浪费多少时间，通过德客软件可以让商家批量上传商品信息，直接可以销售，再也不用一个个填写上传了。",
              problemDec: [
                "首先登录德客软件后台，进入“商品管理”-“商品列表”页面；",
                "首先登录德客软件后台，进入“商品管理”-“商品列表”页面；",
                "①“下载模板”，填写好相关商品信息；②导入商品列表",
                "选择导入excel文件后，，点击“确认”即可。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180711/20180711150622_9982.gif"
              ]
            },
            {
              title: "商品数量为负数了，该怎么恢复？",
              replenish:
                "商家很多时候忙于销售，忘记填充商品了，或者商品销量过大，导致商品数量为负数，这个会对商品盘点代带来麻烦，甚至导致数目对不上，德客软件可以帮您解决。",
              problemDec: [
                "首先进入德客后台，点击“库存管理”，进入“产品盘点”页面；",
                "然后选择数量为负数的商品，点击数量调整，在修改数量框输入数量，点击“确定”即可。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180706/20180706164725_8849.gif"
              ]
            },
            {
              title: "收银时，如何给单个商品打折？",
              replenish:
                "在结算的时候，为了营销，商家可能会针对某个商品给客户打折，这个时候，德客软件就可以帮到您了，下面一起来看看怎么弄吧？",
              problemDec: [
                "首先登录德客软件后台，进入“前台收银”，选择购买商品，在结算区域选择某个商品，点击“折扣”/快捷键o；",
                "最后输入您想打的折扣（1-10之间），点击“确定”，价格会随折扣而改变。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180706/20180706170050_1847.gif"
              ]
            }
          ]
        },
        {
          title: "库存管理",
          children: [
            {
              title: "如何添加供应商？",
              replenish:
                "很多商家都会问，拿货会有记录吗？你们的软件有供应商这个东西吗？请问德客软件什么功能没有的。下面一起来看看怎么新增供应商的吧！",
              problemDec: [
                "首先登录德客软件后台，进入“库存管理”-“进货管理”-供应商管理；",
                "点击“新增供应商”，填写供应商相关信息，点击“确定”即可；",
                "添加供应商后能记录某个店铺在某个供应商的拿货退货记录，轻松掌握商品的流向。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180711/20180711170834_5920.gif"
              ]
            },
            {
              title: "如何给店铺新增进货？",
              replenish:
                "开店铺，新增进货是必不可少的了，从源头就开始做到有数可依，有货可卖。下面看看德客软件怎样给店铺新增进货的？",
              problemDec: [
                "首先进去德客软件手台，点击“库存管理”—“进货管理”—“新增进货”；",
                "然后选择就进货商品，填写进货数量、单价、备注，其它费用等，选择结账方式；",
                "点击“保存”，选择入库审核方式—【入库并审核】货品会直接添加到系统库存；【保存】确认审核收货后才会添加到系统库存；即新增进货成功；。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180711/20180711170542_5295.gif"
              ]
            },
            {
              title: "如何设置商品库存？",
              replenish:
                "商品库存可以让商家清除知道商品还有多少数量，要不要进货，但是有时候会出现商品库存数量错误的情况，这时候该怎么解决呢？",
              problemDec: [
                "首先进入登录德客软件后台，进入“库存管理”-“产品盘点”页面；",
                "在相对应的商品上点击“数量调整”，填写好修改数量；点击“确认”即可。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180711/20180711145240_4181.gif"
              ]
            },
            {
              title: "如何设置商品库存预警提醒？",
              replenish:
                "怎么才能做到库存一直有呢？很多商家在销售商品的过程中，经常忘记补充库存，德客软件就有商品库存预警提醒这个功能。",
              problemDec: [
                "首先点击“系统管理”，进入“商品配置”设置模块；.启用“库存预警”，设置商品低于某个数量提醒；",
                "然后选择数量为负数的商品，点击数量调整，在修改数量框输入数量，点击“确定”即可。",
                "当库存到一定数目的时候，就会提醒商家需要填充库存了。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180706/20180706170358_2629.gif"
              ]
            },
            {
              title: "如何给客户退换货?",
              replenish:
                "作为商家，顾客要退换货是经常发生的事情，当遇到该怎么解决呢？德客软件就可以帮您轻松解决，所以数据都是有记录的。",
              problemDec: [
                "首先点击“智能分析”，进入“销售分析”页面；.选择退换货商品，点击“退换货”；",
                "最后填写退换货原因和数量，点击“确认”即可。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180705/20180705170427_8312.gif"
              ]
            }
          ]
        },
        {
          title: "日常支出",
          children: [
            {
              title: "如何导出查看支出明细报表？",
              replenish:
                "支出明细报表，可以说是商家的命根子了，有了这个报表，能直接掌握着店铺的所有支出，德客软件就有这个功能，让商家的每一笔支出都记录下来，让数据无误。",
              problemDec: [
                "首先进去德客后台，打开“日常支出”-“支出明细”；",
                "可查询某个时间段的支出明细，点击“导出报表”，即可在excel表中查看所有的支出。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180707/20180707161429_9260.gif"
              ]
            },
            {
              title: "如何录入支出明细？",
              replenish:
                "要经营一个店铺，除了拿货支出，其实还是不少零散的支出的，为了更明确的了解店铺的盈利，这些支出是很必要记下来的，德客软件可以帮到您。",
              problemDec: [
                "首先进去德客后台，打开“日常支出”-“支出录入”；",
                "可以为店铺的某个支出，设置分类，选择分类，填写支出金额，填写备注等等。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180707/20180707161203_5255.gif"
              ]
            }
          ]
        },
        {
          title: "货流管理",
          children: []
        },
        {
          title: "智能分析",
          children: [
            {
              title: "如何查看、导出销售报表？",
              replenish:
                "哪个商品销售的好啊？每天每月的销售流水是怎样的啊？这都是商家很关心的，那么怎么查看导出销售报表呢？德客软件可以帮到您。 登录德客软件后台—“智能分析”—“销售分析”；",
              problemDec: [
                "登录德客软件后台—“智能分析”—“销售分析”；",
                "可以根据时间、会员信息、流水单号、商品信息、消费对象、支付方式、消费对象等筛选订单，查看销售情况；",
                "点击“导出报表”，即可通过excel表格查看。",
                "有了这个后，商家对每件商品的销售情况都掌握，轻松对应拿货。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180711/20180711171010_0275.gif"
              ]
            },
            {
              title: "查看商品和商品类别的销售情况",
              replenish:
                "哪个商品、商品类别销售的好，销售情况怎样？德客软件都可以满足您。",
              problemDec: [
                "首先登录德客软件后台—智能分析—产品分析；",
                "然后可以根据时间、查看销售商品数量、销售额、销售毛利、毛利率、销售排行TOP3；",
                "对于产品销售排行、产品销售毛利排行，是通过条形状清楚展示的。",
                "往下，还可以看到每样商品的销售数量和金额等数据。关键还可以导出数据喔！！",
                "对于商品销售类别，德客软件也是可以用数据统计到的。",
                "点击“类别分析”即可根据时间，店铺查看，同样也是可以导出数据的喔！"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180707/20180707163051_5333.gif",
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180707/20180707163119_1809.gif"
              ]
            },
            {
              title: "查看会员销售情况、导出报表",
              replenish:
                "商家想尽办法进行会员营销、维护会员，为了的就是让会员长期消费，清楚知道会员销售情况和查看报表，为了营销作用是十分大的。德客软件可以让您做到。",
              problemDec: [
                "首先进入登录德客软件后台，进入“库存管理”-“产品盘点”页面；",
                "在相对应的商品上点击“数量调整”，填写好修改数量；点击“确认”即可。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180711/20180711145240_4181.gif"
              ]
            },
            {
              title: "如何查看门店概况？",
              replenish:
                "总店、分店的营业总额、实收金额、未结金额、优折赠等等，作为老板能不关心这些吗？放心哈，德客软件都为所有老板准备着了。",
              problemDec: [
                "首先登录德客软件后台—智能分析—销售分析；",
                "可以根据时间来查看各门店概况，营业总额、实收金额、未结金额、优折赠等都清除看到。",
                "还有还有“反结账报表”、“退货报表”、“计次报表”、“会员充值报表”、“会员充次报表”等等都是可以查看和导出的，有没有觉得德客软件功能是在太强大了！！"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180707/20180707162018_5841.gif",
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180707/20180707162042_6496.gif"
              ]
            },
            {
              title: "如何查看每日对账单？",
              replenish:
                "很多商家会问：你们的软件可以看到每日对账单吗？当然，只要用户所需，德客软件都有。",
              problemDec: [
                "首先登录德客软件后台—“智能分析—“销售分析”—“每日对账单”",
                "可以根据时间段查询对账单，连锁店铺可以查看总店和分店的对账单。还可以根据商家需要，进行打印出来喔！",
                "商家对会员消费，充值、消费方式等等都一目了然了，真正做到心中有数了。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180707/20180707161757_6759.gif"
              ]
            }
          ]
        },
        {
          title: "营销平台",
          children: [
            {
              title: "如何把商品数据上传到微信商城里？",
              replenish:
                "之前小编已经说过建立微信商城了，那么有了微信商城后，要有商品才可以进行经营的，那么如何把商品数据上传到微信商城里？",
              problemDec: [
                "首先登录德客软件，进入“营销平台”，进入“微信商城”；",
                "选择“未展示商品”，点击“展示到橱窗，在“已展示商品”页面可看到所展示的商品；要想显示在商城首页，可点击“荐”。",
                "有了商品后，商城可以说正式营业了，客户可根据页面的商品进行选择购买。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180711/20180711170227_0910.gif"
              ]
            },
            {
              title: "如何设置微信商城？",
              replenish:
                "线下线上同步营销，这是每个商家都想的，也是跟上互联网的发展步伐，德客软件就可以满足商家这个要求。",
              problemDec: [
                "登录德客软件后台，进入系统管理”-“支付设置”设置模块；",
                "点击“支付绑定”-“微信支付绑定”，选择服务号，已认证（已经具有微信服务号的）；",
                "然后填写“应用ID”、“应用秘钥”、“微信加解密串”，点击“确定”即可；",
                "设置完成后，返回首页，进入“营销平台”—“微信商城”页面，即可设置微信商城相关信息了，意味着成功实现线下线上齐发展了。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180711/20180711162431_9289.jpg"
              ]
            },
            {
              title: "设置微信商城相关信息？",
              replenish:
                "微信商城，当然是跟微信相关的了，所以需要对接微信服务号，所以首先得注册一个微信服务号才能走一下步骤喔！",
              problemDec: [
                "首先登录德客软件，进入“营销平台”，进入“微信商城”-“橱窗首页”；",
                "选择模板（可根据店铺商品选择搭配风格）；上传广告图片（会以轮播图的形式出现在商城首页）；",
                "填写微信商城信息——店铺名称、电话、店铺微信、介绍、公告、地址等信息；",
                "填写微信商城信息——店铺名称、电话、店铺微信、介绍、公告、地址等信息；"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180711/20180711162742_6486.gif"
              ]
            },
            {
              title: "如何给会员发送短信？",
              replenish:
                "在德客软件，您可以用各种短信推送到会员手机，让其享受尊贵VIP礼遇。在德客软件，您不仅可以使用多种模板一键发送，还可以按照自己的设计给会员送去最贴心的的祝福。",
              problemDec: [
                "登录德客软件，打开“营销平台”-“营销短信”，编辑要发送的内容，选择要发送给的会员，点击发送即可。",
                "营销短信是最精准的一种营销方式了，消息直接发送到用户手里。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180705/20180705175655_9757.gif"
              ]
            },
            {
              title: "优惠券使用攻略",
              replenish:
                "出门逛街见得最多的优惠活动大都是通过发传单的形式传递，德客软件有自己的营销方法，就是通过电子优惠券的方式发送到会员手机或者扫码领取，让朋友圈路过的所有人都可以领取。",
              problemDec: [
                "使用优惠券的第一步就是设置好优惠券，然后通知到会员。打开“营销平台”-“优惠券”-“发放优惠券”；",
                "发放后，可以通过而且买让用户直接领取使用。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180705/20180705171326_8888.gif"
              ]
            }
          ]
        },
        {
          title: "前台收银",
          children: [
            {
              title: "如何开单收银？",
              replenish:
                "开单收银，是商家选择购买收银软件的一个重要因素，那么通过德客软件怎么进行开单收银呢？",
              problemDec: [
                "首先登录德客软件后台，进入“前台收银”；",
                "然后选择客户要购买的商品，在这里也可以给某个商品进行打折、改价等；",
                "点击结算，也可以统一修改折扣、选择支付方式、是否抹零、是否打印小票等；",
                "如果客户是会员的话，可以选择会员进行结算，会根据会员等级折扣自动打折，也可以选择会员积分和会员余额进行结算。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180711/20180711171126_7863.gif"
              ]
            },
            {
              title: "如何给没有条码的商品收银？",
              replenish:
                "并不是所有的商品都是有条码的，遇到这种情况，商家在结算的时候，怎么对这类商品进行收银呢？德客软件可以帮到您，当您录入商品名称的时候，系统会自动显示助词码。",
              problemDec: [
                "首先登录德客软件后台，进入“前台收银”页面，在左上角输入商品“助词码（商品名字首字母大写）”",
                "然后选择商品，点击结算即可。",
                "这个功能，可以给商家省下很多麻烦，能做到快速结算。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180705/20180705182722_2687.gif"
              ]
            },
            {
              title: "收银时，如何挂单取单？",
              replenish:
                "很多人都问小编，顾客在结算当中，出现问题，为了不影响下一个顾客，该怎么做才能不掉调前者订单，也可以为后者进行结算呢？这个时候就用到挂单取单了。",
              problemDec: [
                "挂单：",
                "进入“前台收银”页面，选择购买的商品，点击“下单”，点击“确认挂单”，即可。",
                "取单：",
                "首先进入“前台收银”页面，点击“挂单”/快捷键h；",
                "然后选择相应单号，点击取单，即可。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180705/20180705162608_2872.gif"
              ]
            },
            {
              title: "会员积分抵现操作",
              replenish: "德客软件会员怎么使用积分抵支付金额？",
              problemDec: [
                "首先，在系统管理-销售设置，积分抵现设置；",
                "然后进入前台收银，结算页面选择会员，选择“最多可使用..积分抵..元”；结算的时候“实收金额”中减去抵值的金额，就可以实现积分抵值功能。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180704/20180704181208_0568.gif"
              ]
            },
            {
              title: "收银自定义支付方式在哪里设置？",
              replenish:
                "互联网时代，支付方式都是商家首先考虑的，德客软件自定义支付方式怎么设置呢？",
              problemDec: [
                "点击“系统管理”，进入“销售配置”设置模块；",
                "启用“自定义支付方式设置”，自行选择开启或者停用的支付方式，即可。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180704/20180704180809_6115.gif"
              ]
            }
          ]
        },
        {
          title: "系统管理",
          children: [
            {
              title: "如何修改店铺登录密码？",
              replenish:
                "密码都是很私隐的东西，有时候老板给了员工店铺的登录密码，员工离职了，为了安全，修改密码是很有必要的，德客软件怎么修改店铺密码呢？",
              problemDec: [
                "首先进入德客软件后台，点击右上角，选择“修改密码”；",
                "然后填写原密码、新密码、确认新密码，点击“确定 ”，重新使用新密码登录即可。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180707/20180707173659_4181.gif"
              ]
            },
            {
              title: "如何更换店铺的行业？",
              replenish:
                "有些老板，购买了德客软件，可能中途想换行业的，这个也是可以的，那怎么更换呢？",
              problemDec: [
                "首先进入德客软件后台，点击“系统管理”，进入“我的店铺”之店铺信息点击【修改】；",
                "在“行业类型”，选择需要更换的行业，点击“确定”即可。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180705/20180705182722_2687.gif"
              ]
            },
            {
              title: "购物小票模板的设置",
              replenish:
                "一个完整的消费链肯定是少不了小票这一环的，小票不仅仅是消费凭证的象征，还可以为店铺的消费人群分析和营销策略给予重要的数据支撑。如果你不知道小票该有的内容有哪些，那么您可以看这里。",
              problemDec: [
                "首先进入德客软件后台，点击“系统管理”，进入“我的店铺”之店铺信息点击【修改】；",
                "首先进入德客软件后台，点击“系统管理”，进入“我的店铺”之店铺信息点击【修改】；",
                "因为每个行业的功能需求都是不一样的，德客软件为了满足行业需求，所以把每个行业都区分开来，让功能更专业。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180707/20180707173445_0530.gif"
              ]
            }
          ]
        },
        {
          title: "员工管理",
          children: [
            {
              title: "如何设置员工提成？",
              replenish:
                "直接根据销售业绩等核算出员工工资，这个很多老板梦寐以求的吧，毕竟不需要动手，就把工资算出来了，可是吧，岗位不一样的员工底薪提成都是不一样的，该怎么设置呢？",
              problemDec: [
                "进入德客软件后台，点击“系统管理”，进入“员工管理”页面；",
                "然后“岗位权限管理”——“添加岗位”，选择相应的提成方式；",
                "①填写岗位名称、岗位备注",
                "②选择提成方式（个人汇总提成、店面业绩汇总提成）；",
                "③选择业绩提成（开卡业绩、充值业绩、商品业绩、服务业绩），填写提成区段，提成方式填写好要点击“确定”；最后点击“保存并返回”。",
                "省时省力的方法，哪个老板不想拥有呢？赶紧去德客官网免费体验吧！！！"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180707/20180707171343_3117.gif"
              ]
            },
            {
              title: "如何奖励或者扣除员工提成？",
              replenish:
                "员工表现好了，老板可能随时随地给予奖励，那么这时候怎么设置呢？",
              problemDec: [
                "进入德客软件后台，点击“系统管理”，进入“员工管理”—“员工管理”页面；",
                "选择要调整提成的员工，点击“提成明细”；填写“操作类型”、“调整金额”、“备注信息”，点击“确定”即可。",
                "老板就可以根据员工的表现，额外给予奖励，励志员工，管理好员工的好方法。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180707/20180707165514_5783.gif"
              ]
            },
            {
              title: "如何设置员工权限？",
              replenish:
                "管理会员是商家管理店铺的一个重大之一，而且很多系统都会针对会员这一款大下功夫，德客软件能做好会员管理，还能满足商家需求，能对员工进行管理，下面小编就来说说如何设置员工权限。",
              problemDec: [
                "首先点击“系统管理”，进入“员工管理”——“岗位权限管理”页面；",
                "选择某个员工，点进“设置权限”或者“设置APP权限”；选择功能设置权限，勾选相对应的功能权限，点击“确定”即可。",
                "这时候，商家喜欢给哪个员工权限，都可以自己设置，便于管理。"
              ],
              imgDec: [
                "http://www.decerp.cn/Scripts/kindeditor-4.0.5/attached/image/20180705/20180705171038_0187.gif"
              ]
            }
          ]
        },
        {
          title: "硬件相关问题",
          children: []
        }
      ],
      // 视频数据
      videoData: [
        {
          href: "https://v.qq.com/x/page/p0501l9l1sq.html",
          icon: "iconqian",
          name: "会员充次"
        },
        {
          href: "https://v.qq.com/x/page/m0501agxhdl.html",
          icon: "iconhuiyuan",
          name: "会员列表"
        },
        {
          href: "https://v.qq.com/x/page/q0501hor4xo.html",
          icon: "iconshouyin",
          name: "前台收银"
        },
        {
          href: "https://v.qq.com/x/page/n0501h2vda3.html",
          icon: "iconshangpinliebiao",
          name: "商品列表"
        },
        {
          href: "https://v.qq.com/x/page/a0501mgby1p.html",
          icon: "iconshangcheng",
          name: "微信商城"
        },
        {
          href: "https://v.qq.com/x/page/k0501157pjl.html",
          icon: "iconxitongguanli",
          name: "系统管理"
        },
        {
          href: "https://v.qq.com/x/page/r0501nr715u.html",
          icon: "iconyingxiaohuodongfengxian",
          name: "营销活动"
        },
        {
          href: "https://v.qq.com/x/page/s0501m8fxem.html",
          icon: "iconyouhuiquan",
          name: "优惠券设置"
        },
        {
          href: "https://v.qq.com/x/page/w0501g9x0qq.html",
          icon: "icon17_daorudaochu",
          name: "商品导入导出"
        },
        {
          href: "https://v.qq.com/x/page/y0501g1irid.html",
          icon: "iconguigejijia",
          name: "商品多规格"
        },
        {
          href: "https://v.qq.com/x/page/r0501ls8vct.html",
          icon: "iconfenxi2",
          name: "智能分析"
        },
        {
          href: "https://v.qq.com/x/page/o0501ka44hx.html",
          icon: "icontichengguize",
          name: "员工提成"
        },
        {
          href: "https://v.qq.com/x/page/d0501geraps.html",
          icon: "iconduanxin",
          name: "营销短信"
        },
        {
          href: "https://v.qq.com/x/page/n0501nfndf9.html",
          icon: "iconhuiyuantianjiakehu",
          name: "新增会员"
        },
        {
          href: "https://v.qq.com/x/page/m0501qmshun.html",
          icon: "iconweixinhuiyuanqia",
          name: "微信会员"
        },
        {
          href: "https://v.qq.com/x/page/y0501qtu0og.html",
          icon: "iconcz-zc",
          name: "日常支出"
        },
        {
          href: "https://v.qq.com/x/page/t05015akiat.html",
          icon: "iconkucun-",
          name: "库存管理"
        },
        {
          href: "https://v.qq.com/x/page/e0501qqjigy.html",
          icon: "iconchongzhi-",
          name: "会员充值"
        },
        {
          href: "https://v.qq.com/x/page/v0501eu6wmx.html",
          icon: "iconshouyintubiaojiaojieban",
          name: "新增商品和交接班系统"
        },
        {
          href: "https://v.qq.com/x/page/f0501pmo101.html",
          icon: "iconyunliankeji_gongyinglianfuben",
          name: "微信点餐和外卖设置"
        }
      ],
      // 硬件连接数据
      hardwareData: [
        {
          title: "会员管理",
          html: `<div id="content"><div id="canvasCon_1" class="canvasCon"><canvas id="canvas_1" height="1683" width="1190"></canvas></div><div id="canvasCon_2" class="canvasCon"><canvas id="canvas_2" height="1683" width="1190"></canvas></div><div id="canvasCon_3" class="canvasCon"><canvas id="canvas_3" height="1683" width="1190"></canvas></div><div id="canvasCon_4" class="canvasCon"><canvas id="canvas_4" height="1683" width="1190"></canvas></div><div id="canvasCon_5" class="canvasCon"><canvas id="canvas_5" height="1683" width="1190"></canvas></div><div id="canvasCon_6" class="canvasCon"><canvas id="canvas_6" height="1683" width="1190"></canvas></div><div id="canvasCon_7" class="canvasCon"><canvas id="canvas_7" height="1683" width="1190"></canvas></div></div>`
        },
        {
          title: "商品管理"
        },
        {
          title: "库存管理"
        },
        {
          title: "日常支出"
        },
        {
          title: "货流管理"
        },
        {
          title: "智能分析"
        }
      ],
      // 更新公告
      updateLog: []
    };
  },
  mounted() {
    // 格式化时间
    this.timeFormatting = this.utils.timeFormatting();
    // 请求常见问题的数据
    this.$api.getFamiliarProblemList().then(res => {
      const { sublist } = res.data[0];
      this.issueData = sublist.map(v => {
        return {
          ...v
        };
      });
    });
    // 请求版本更新公告的数据
    this.$api.getNoticeList(100).then(res => {
      this.updateLog = res.map(v => {
        // 格式化更新时间
        v.sv_creation_date = new Date(v.sv_creation_date).Format(
          "yyyy-MM-dd hh:mm:ss"
        );
        return {
          ...v
        };
      });
    });
    // 判断是否从首页过来
    if (this.$route.query.activeName != undefined) {
      this.activeName = this.$route.query.activeName;
    } else {
      this.activeName = "flow";
    }
  }
};
</script>

<style lang="less" scoped>
@deep: ~">>>";
.problem {
  .menuLevel {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 80px;
  }
  // 视频中心
  .video {
    text-align: center;
    width: 100%;
    .videoContent {
      margin: 0 auto;
      width: 1200px;
      background-color: #fff;
      .title {
        font-size: 24px;
        font-weight: 600;
        padding-top: 20px;
        padding-bottom: 10px;
      }
      .titleDec {
        padding-bottom: 40px;
        font-size: 18px;
      }
      .videoList {
        display: flex;
        flex-wrap: wrap;
        margin: 0 100px;
        li {
          width: 250px;
          background-color: #464d5a;
          height: 250px;
          margin-right: 60px;
          margin-bottom: 20px;
          a {
            display: flex;
            width: 100%;
            height: 100%;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            color: #30c17c;
            i {
              position: relative;
              color: #30c17c;
              font-size: 50px;
              margin-top: 20px;
              &::after {
                content: "";
                position: absolute;
                border: 1px solid #30c17c;
                width: 70px;
                height: 70px;
                border-radius: 50%;
                right: -10px;
                top: -10px;
              }
            }
            img {
              width: 20%;
            }
          }
        }
      }
    }
  }
  // 内容的tab栏
  .tableItem {
    // 右边的问题内容
    .solveContent {
      padding: 20px;
    }
  }
  .notice {
    background-color: #fff;
    width: 60%;
    margin: 0 auto;
    .title {
      font-size: 22px;
      padding: 20px 0;
      text-align: center;
    }
    .updateItem {
      display: flex;
      flex-wrap: wrap;
      .updateTitle {
        width: 50%;
        text-align: center;
      }
      .updateTime {
        width: 50%;
        font-size: 14px;
        color: red;
      }
      .updateContent {
        width: 70%;
        margin: 20px auto;
        padding: 25px;
        background-color: #f2f3f4;
        font-size: 15px;
      }
    }
  }
}
// 标签导航
.problem @{deep} .el-tabs--card > .el-tabs__header {
  border-bottom: none;
  margin-left: 35%;
}
// 每一项导航标题
.problem @{deep} .el-tabs--card > .el-tabs__header .el-tabs__item {
  height: 80px;
  border-bottom: none;
  border-left: none;
  padding: 0 40px;
}
// 标签导航内容部分
.problem @{deep} .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none;
  height: 80px;
}
// 修改问题标题中的文字对齐方式
.problem @{deep} .el-tabs--left .el-tabs__item.is-left {
  text-align: left;
}
// 修改左边tab栏不换行的问题
.tableItem @{deep} .el-tabs--left .el-tabs__item.is-left {
  white-space: normal;
  width: 250px;
  height: auto;
  line-height: normal;
  margin-bottom: 20px;
}
// 二级菜单栏
// .problem @{deep} .el-tabs--border-card>.el-tabs__header .el-tabs__item+.el-tabs__item {
//   font-size: 20px;
// }
</style>